<template>
  <div class="app-container">
    <div class="app-container-page kz-el-tabs">
      <el-tabs type="border-card" @tab-click="handleTabClick">
        <el-tab-pane :label="`全部订单(${totalLabel})`">
        </el-tab-pane>
        <el-tab-pane :label="`${item.state_name}(${datalist.filter(idata => idata.state_id == item.state_id).length})`"  v-for="item in orderStateList" :key="item.state_id">
        </el-tab-pane>
      </el-tabs>
      <orderTable :listLoading="loading" :total="total" :list="nowdatalist" @queryDatalist="queryData"></orderTable>
    </div>
  </div>
</template>

<script>
  import orderTable from '../components/order-table.vue'
  import {
    getAllOrderStatusApi,
    getOrder
  } from "@/api/order/index";
  export default {
    name: 'OrderIndex',
    components: {
      orderTable
    },
    data() {
      return {
        editModal: false,
        loading: false,
        driver: null,
        orderStateList: [],
        datalist: [],
        nowdatalist: [],
        total: 0,
        totalLabel: 0,
        title: '',
        query:{
          pageIndex: 1,
          pageSize: 10
        }
      }
    },
    mounted() {
      if (sessionStorage.getItem('rowData')) {
        this.editModal = true
      }
      this.getAllStatus()
    },
    methods: {
      /**
       * 查询列表
       */
      queryData(param) {
        this.loading = true;
        getOrder(param)
          .then((res) => {
            console.log('获取订单列表', res);
            this.loading = false;
            if (res.rstpCode === '0000') {
              this.total = res.total_rows
              this.totalLabel = res.total_rows
              this.datalist = res.data;
              this.nowdatalist = res.data;
              this.nowdatalist.forEach(item => {
                for (let key in item) {
                  if (item[key] == null || item[key] == "null" || item[key] == "None") {
                    item[key] = ""
                  }
                }
                console.log(item.state_name, this.datalist.filter(idata => idata.state_id === '1').length);
              })
            } else {
              this.$Message.error(res.rstpMsg);
            }
          })
      },
      // 获取所有状态
      getAllStatus() {
        getAllOrderStatusApi()
          .then((res) => {
            console.log('获取所有订单状态', res);
            if (res.rstpCode === '0000') {
              this.orderStateList = res.data;
              this.queryData(this.query)
            } else {
              this.$Message.error(res.rstpMsg);
            }
          })
      },
      handleTabClick(tab) {
        console.log(tab.index);
        let sta_id = tab.index == '0' ? '' : tab.index
        this.loading = true;
        getOrder({
          state_id: sta_id,
          pageIndex: 1,
          pageSize: 10
        }).then((res) => {
          this.loading = false;
          console.log('获取订单列表', res);
          if (res.rstpCode === '0000') {
            this.nowdatalist = res.data;
            this.total = res.total_rows;
          } else {
            this.$Message.error(res.rstpMsg);
          }
        })
      }
    }
  }
</script>
<style scoped lang="less">
  .app-container-page {
    padding-top: 20px;
  }

  .YT_MAIN {
    min-height: 10px;
    background-color: hsla(0, 0%, 100%, 0) !important;
    border-radius: 2px 2px 0 0
  }

  .H100 {
    height: 100%
  }

  .YT_TABS {
    padding: 0 15px
  }

  .orderConetent {
    padding: 20px 0;
  }
</style>
